/**
 * Created by Administrator on 2017/5/4.
 */
import rt from 'angular-ui-router';
import html from './index.html';
import * as d3 from 'd3';
export default angular.module('husband',[rt])
.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('husband.demo', {
    url: '/demo',
    template:html
  });
}]).controller('demoController',["$scope","$http",function ($scope,$http) {

  var contentPath = 'http://192.168.1.108:8080/mmdb2';
  var ci = null;
  var rlt = null;
  var rectR = 800;//区域的大小
  var rectP = 10;
  var area = 4;
  var ci1 = null ;
  var ci2 = null ;
  var ci3 = null ;
  $http.get('api/ci1').then(function (data) {
    ci1 = data.data.data.datas;
    createCi();
  });
  $http.get('api/ci2').then(function (data) {
    ci2 = data.data.data.datas;
    createCi();
  });
  $http.get('api/ci3').then(function (data) {
    ci3 = data.data.data.datas;
    createCi();
  });


  function createCi() {
    if(ci1 && ci2 && ci3) {
      ci = ci1.concat(ci2).concat(ci3);
      $scope.selectData = ci[0].data;
      lineAndnode();
    }
  }

  $http.get('api/rlt2').then(function (data) {
    rlt = data.data.data;
    console.log(rlt);
    lineAndnode();
  });




  // $http.get('api/ci').then(function (data) {
  //   ci = data.data.data.datas;
  //   $scope.selectData = ci[0].data;
  //   lineAndnode();
  // });
  // $http.get('api/rlt').then(function (data) {
  //   rlt = data.data.data;
  //   lineAndnode();
  // });
  $scope.typeChange = function (name) {
    draw(name);
  };
  //线的处理
  function lineAndnode() {
    if (!ci || !rlt) {
      console.log('正在加载');
      return
    }

    for (var i = 0; i < rlt.length; i++) {
      for (var j = 0; j < ci.length; j++) {
        if (rlt[i].startCi == ci[j].id) {
          rlt[i].source = ci[j];
        } else if (rlt[i].endCi == ci[j].id) {
          rlt[i].target = ci[j];
        }
        if (rlt[i].target && rlt[i].source) {
          rlt[i].target.num ? rlt[i].target.num++ : (rlt[i].target.num = 1);
          if( !rlt[i].target.sourceNode){
            rlt[i].target.sourceNode= {};
          }
          if( !rlt[i].source.targetNode){
            rlt[i].source.targetNode= {};
          }
          rlt[i].target.sourceNode[rlt[i].source.id] = 1;
          rlt[i].source.targetNode[rlt[i].target.id] = 1;
          break
        }
      }
    }

  }/*-----lineAndnode--------*/

var nums = 0 ;
//  所有的节点进行分类
  function draw(type) {

    // var type = '部署单元类型';
    if (!ci || !rlt) {
      console.log('正在加载');
    } else {
      var obj = {};
      var num = 0;
      //节点进行划分
      for (var i = 0; i < ci.length; i++) {
        if(!ci[i].data[type]){
          ci[i].data[type] = '无'
        }
        if (!obj[ci[i].data[type]]) {
          obj[ci[i].data[type]] = {};
          obj[ci[i].data[type]].nodes = [];
          obj[ci[i].data[type]].lines = [];
        }
        obj[ci[i].data[type]].nodes.push(ci[i]);
      }

      //将所有的节点一些信息进行处理
      for(var i = 0 ; i < ci.length; i ++) {
        ci[i].fx = undefined;
        ci[i].fy = undefined;
        ci[i].x = undefined;
        ci[i].y = undefined;
        ci[i].vx = undefined;
        ci[i].vy = undefined;
      }
      //将所有的连线一些信息进行处理
      for(var i = 0 ; i < rlt.length; i ++) {
        rlt[i].order = 0;
      }
      // if(nums){
      //   return
      // }
      nums++;
      //判断线的位置是否在node集合中
      function isInNodes (line,nodes) {
        var tflag = false;
        var sflag = false;
        for(var i = 0 ; i < nodes.length; i ++){
          if(line.startCi == nodes[i].id) {
            tflag = true
          }else if(line.endCi == nodes[i].id){
            sflag = true
          };
          if(tflag && sflag) {
            line.order = 1;
            return true
          }
        }
        return false
      }
      for(var i  in obj){
        obj[i].name = i ||"无";
        obj[i].x = (num%area) *rectR;
        obj[i].y = Math.floor(num/area) *rectR;
        num++;
        for(var x = 0 ; x< rlt.length;x++ ) {
          if(isInNodes(rlt[x],obj[i].nodes))obj[i].lines.push(rlt[x]);
        };
      };
          d3.select('svg').remove();
          //将画布中的内容进行绘制
          var pad = d3.select('.svgContainer')
              .append('svg')
              .style('position','relative')
              .attr('width','100%')
              .attr('height','100%')
              .append('g')
              .attr('class','allContainer')
              ;
      var force = d3.zoom().on('zoom',function(){ pad.attr('transform', d3.event.transform)});
      d3.select('svg').call(force);
          var arrowMarker = pad.append("marker")
              .attr("id","arrow")
              .attr("markerUnits","strokeWidth")
              .attr("markerWidth",12)
              .attr("markerHeight",12)
              .attr("viewBox","0 0 24 24")
              .attr("refX",0)
              .attr("refY",12)
              .attr("orient","auto")
              ;
          var arrow_path = "M0,0 L0,24 L12,12 Z";
              // 定义箭头
              arrowMarker.append("path")
              .attr("d",arrow_path)
              .attr("fill","grey")
              ;

      for(var i in obj) {
        forceDraw(pad,obj[i]);
      };
      drawDline(pad);
      d3.selectAll('.nodeG').on('mouseenter',function () {
        filterLine(d3.select(this))
      });


    }  /*-----else--------*/
  }/*-----draw--------*/


  function forceDraw(pad,obj) {
    var graph = pad.append('g')
        .datum(obj)
        .attr('class','forcePad')
    ;
    graph.append('text')
      .text(obj.name||'无')
      .attr('transform','translate('+obj.x+","+(obj.y+20)+')')
    ;
    graph.append('rect').attr('x',function (d) {
      return d.x
    }).attr('y',function (d) {
      return d.y
    })
    .attr('width',rectR - rectP)
    .attr('height',rectR- rectP)
    .attr('fill','none')
    .attr('stroke','black')
    ;
    var force = objs.draw()(graph);
    var r = (rectR-rectP)/2;
    force.lineLength(100).size([r,r]).center([obj.x+r,obj.y+r]).start( obj.nodes,obj.lines);

  }/*-----forceDraw--------*/

  function drawDline(pad) {
    var arr = [];
    for(var i = 0 ; i < rlt.length; i ++) {
      if(!rlt[i].order){
        arr.push(rlt[i])
      }
    };
    pad.selectAll('path.areaLine')
    .data(arr)
    .enter()
    .append('path')
    .attr('class','areaLine')
    .classed('linePath',true)
    .attr('stroke','black')
    .attr('opacity','0.1')
    .attr("marker-end","url(#arrow)")
    .attr('fill','none')
    ;
  }/*-----drawDline--------*/
  function  updateLine() {
    d3.selectAll('path.areaLine').each(function () {
      d3.select(this).attr('d',function (d) {
        var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
        if(!dr){
          return 'M 0 0 L 0 0'
        }
        return ['M', d.source.x + d.source.r * dx / dr , d.source.y + d.source.r * dy / dr ,
          'L', d.target.x - (d.target.r + 4) * dx / dr , d.target.y - (d.target.r + 4) * dy / dr].join(' ');
      })
    });
  }/*-----drawDline--------*/
  function filterLine(sels) {
    var sel = sels.datum();
    if(!sel.sourceNode && !sel.targetNode){
      d3.selectAll('.nodeG').classed('displayNode',false).style('opacity','0.1');
      d3.selectAll('path.linePath').classed('displayLine',false).style('opacity','0.1');
      sels.classed('displayNode',true).style('opacity','1');
      console.log('error:节点没有关系');
      return
    }
    d3.selectAll('.nodeG').each(function (d) {
      if( sel.targetNode[d.id] || sel.sourceNode[d.id] ) {
        d3.select(this).classed('displayNode',true).style('opacity','1');
      }else {
        d3.select(this).classed('displayNode',false).style('opacity','0.1');
      };
      sels.classed('displayNode',true).style('opacity','1');
    });
    d3.selectAll('path.linePath').each(function (d) {
      if(d.source.id == sel.id || d.target.id == sel.id){
        d3.select(this).classed('displayLine',true).style('opacity','1');
      }
      else {
        d3.select(this).classed('displayLine',false).style('opacity','0.1');
      }
    });
  }/*-----filterLine--------*/




  //力学图对象
  var objs = {};
  objs.draw = function () {
    var pad = null;
    var graph = null;
    var lineLength = 100;
    var lines = null,width = 380,height = 380,force = null,r = 10;
    var centerX = 0,centerY = 0;
    function _force(contain) {
      pad = contain ? contain : d3.select('svg');
      _force.init();
      graph = pad;
      return _force;
    }
    /*一些初始化的东西*/
    _force.init = function () {
      // var arrowMarker = pad.append("marker")
      // .attr("id","arrow")
      // .attr("markerUnits","strokeWidth")
      // .attr("markerWidth",12)
      // .attr("markerHeight",12)
      // .attr("viewBox","0 0 24 24")
      // .attr("refX",0)
      // .attr("refY",12)
      // .attr("orient","auto")
      // ;
      // var arrow_path = "M0,0 L0,24 L12,12 Z";
      // // 定义箭头
      // arrowMarker.append("path")
      // .attr("d",arrow_path)
      // .attr("fill","grey")
      // ;
    };
    /*
     * 进行绘制的容器缩放事件（参数：d3元素）
     *

    /*
     * 绘制线的距离改变
     * */
    _force.lineLength = function (length) {
      lineLength = length;
      return this
    };
    _force.changeR = function (nodeR) {
      r = nodeR;
      return this
    };
    /*
     * 绘制的区域参数（[宽,高]）
     * */
    _force.size = function (arr) {
      width = arr[0];
      height = arr[1];
      return this
    };
    /*
     * 绘制的区域坐标（[x,y]）
     * */
    _force.center = function (arr) {
      centerX = arr[0];
      centerY = arr[1];
      return this
    };

    /*
     * 进行线数据的处理(进行传入所有的lines数据)
     * */
    _force.lines = function (lineData) {
      lines = d3.forceLink(lineData)
      .id(function (d) {
        return d.id
      })
      .distance(function (d) {
        return lineLength + d.target.num * 5;
      })
      .strength(0.01)
      ;
      _force.drawLines(lineData);
    };
    /*
     * 进行线数据的处理(进行传入所有的nodes的数据)
     * */
    _force.nodes = function (nodeData) {
      var maxZone;
      if(width > height){
        maxZone = height
      }else {
        maxZone = width
      }
      console.log(maxZone);
      force = d3.forceSimulation(nodeData)
      .force("link", lines)
      .force("charge", d3.forceManyBody().strength(-300).theta(1).distanceMax(maxZone/2))
      .force("center", d3.forceCenter(centerX, centerY))
      ;
      force.alpha(0.1).alphaTarget(0.1).velocityDecay(0.1);
      _force.drawNodes(nodeData);
      force.on('tick',function () {
        var maxX = centerX + maxZone/2;
        var minX = centerX - maxZone/2;
        var maxY = centerY + maxZone/2;
        var minY = centerY - maxZone/2;
        graph.selectAll('.nodeG').attr('transform',function (d) {
          if(d.x > maxX){
            d.x = maxX
          }else if(d.x < minX) {
            d.x = minX
          }
          if(d.y > maxY){
            d.y = maxY
          }else if(d.x < minY) {
            d.y = minY
          };

          return 'translate(' + d.x + ',' + d.y + ')';
        })
        ;
        _force.updateLine();
      });
    };


    /*
     * 更新连线
     * */
    _force.updateLine = function (sel) {
      updateLine();
      if(!sel){
        graph.selectAll('.force_line').attr('d',function (d) {
          var dx = d.target.x - d.source.x,
          dy = d.target.y - d.source.y,
          dr = Math.sqrt(dx * dx + dy * dy);
          return ['M', d.source.x + d.source.r * dx / dr , d.source.y + d.source.r * dy / dr ,
            'L', d.target.x - (d.target.r + 4) * dx / dr , d.target.y - (d.target.r + 4) * dy / dr].join(' ');
        });
        force.alphaTarget(0);
      }else {
        sel.attr('d',function (d) {
          var dx = d.target.x - d.source.x,
          dy = d.target.y - d.source.y,
          dr = Math.sqrt(dx * dx + dy * dy);
          return ['M', d.source.x + d.source.r * dx / dr , d.source.y + d.source.r * dy / dr ,
            'L', d.target.x - (d.target.r + 4) * dx / dr , d.target.y - (d.target.r + 4) * dy / dr].join(' ');
        });
      }

    };

    /*
     * 过滤连线并更新
     * */
    _force.filterLine = function (id) {
      var line = graph.selectAll('.force_line').filter(function (d) {
        return (d.target.id == id || d.source.id == id)
      });
      return line;
    };
    /*
     * 进行绘图
     * */
    _force.drawLines = function (lines) {
      var ele = graph.selectAll('g.lineG').data(lines).enter().append('g').attr('class','lineG');
      ele.append('path').attr('class','force_line').classed('linePath',true).attr('stroke','black').attr("marker-end","url(#arrow)").attr('fill','none');
    };
    _force.drawNodes = function (nodes) {
      function dragstart(d) {
        if (!d3.event.active) force.stop();
        if(!d.fx){
          d.fx = d.x;   d.fy = d.y;
        }
      }
      function dragging(d) {
        d.x += d3.event.dx;d.y += d3.event.dy;
        d.fx += d3.event.dx;  d.fy += d3.event.dy;
        d3.select(this).attr('transform',function () {
          return 'translate('+ d.fx +','+ d.fy +')';
        });
        var sel = _force.filterLine(d.id);
        _force.updateLine(sel);
      }
      function dragged(d) {
        // if (!d3.event.active) force.alphaTarget(0);
        // d.fx = d3.event.x;  d.fy = d3.event.y;
      };
      var dragEvent = d3.drag().on('start',dragstart).on('drag',dragging).on('end',dragged);
      var ele = graph.selectAll('g.nodeG').data(nodes).enter().append('g').attr('class','nodeG');
      //添加球
      ele.append('rect')
      .attr('class','force_circle')
      .attr('x',function (d) {
        if(d.num){
          d.r = d.num * 2 +  r;
        }else {
          d.r = r;
        }
        return -d.r* Math.sqrt(0.5)
      })
      .attr('y',function (d) {
        return -d.r* Math.sqrt(0.5)
      })
      .attr('height',function (d) {
        return 2*d.r* Math.sqrt(0.5)
      })
      .attr('width',function (d) {
        return 2*d.r* Math.sqrt(0.5)

      })
      .attr('fill',function (d) {
        return d.classColor || '#3fa8df'
      })
      .style('opacity',0)
      ;

      ele.append('image')
      .attr('class','background')
      .attr('xlink:href',function (d) {
        return contentPath + d.icon
      })
      .attr('width',function (d) {
        return 2*d.r* Math.sqrt(0.5)
      })
      .attr('height',function (d) {
        return 2*d.r* Math.sqrt(0.5)
      })
      .attr('transform',function (d) {
        return "translate("+  (-d.r* Math.sqrt(0.5)) + ", "+ (-d.r* Math.sqrt(0.5)) +")"
      })
      ;
      ele.append('text').text(function (d) {
        return d.name
      })
      .attr('text-anchor','middle')
      ;
      ele.on('mouseenter',function () {
        // filterNode(d3.select(this));
      })
      .on('mouseleave',function () {
        // filterOver();
      });
      ele.call(dragEvent);
    };

    /*
     * 进行数据的处理(进行传入所有的lines数据,还有线的长度)
     * */
    _force.start = function (nodeData,lineData) {
      _force.init();
      _force.lines(lineData);
      _force.nodes(nodeData);
      setTimeout(_force.end,5000);
    };
    /*
     * 进行force终止
     */
    _force.end = function () {
      force.stop();
      return _force;
    };

    return _force
  };/*-----力学图对象--------*/






}]);
